<template lang="pug">
  #topbar.header
    div.d-lg-none
      span.btn-link.toggle-sidebar.pg.pg-menu(@click="toggleSystem")
        i.iconfont.icon-module
      span.btn-link.toggle-sidebar.pg.pg-menu(@click="toggleMenu")
        i.iconfont.icon-expand
      span.menu-home.btn-link.toggle-sidebar.pg.pg-menu(
        :class="{active:currentSystem.menuTypeId==='HOME'}"
        @click="selectHomeMenu")
        i.iconfont.icon-home
    div.d-flex
      Logo
      span.d-none.btn-link.toggle-sidebar.d-lg-block.pg.pg-menu(@click="toggleSystem")
        i.iconfont.icon-module
      span.d-none.btn-link.toggle-sidebar.d-lg-block.pg.pg-menu(@click="toggleMenu")
        i.iconfont.icon-expand
      span.menu-home.d-none.btn-link.toggle-sidebar.d-lg-block.pg.pg-menu(
        :class="{active:currentSystem.menuTypeId==='HOME'}"
        @click="selectHomeMenu")
        i.iconfont.icon-home
    //- a.workflow-link(href="#/workFlow") 工单
    div.d-flex.align-items-center
      Setting(:realName='realName')
      Toolbar.d-lg-block
      //- Quickview
</template>

<script>

import Logo from './Logo'
import Toolbar from './Toolbar'
import Setting from './Setting'
import Quickview from './Quickview'
import Screenfull from './Screenfull'
import Breakcrumb from './Breakcrumb'

export default {
  name: 'topbar',
  components: {
    Logo,
    Toolbar,
    Setting,
    Quickview,
    Screenfull,
    Breakcrumb
  },
  props: {
    realName: String,
    currentSystem: Object
  },
  data () {
    return {
    }
  },
  methods: {
    toggleMenu () {
      this.$emit('toggleMenu')
    },
    toggleSystem () {
      this.$emit('toggleSystem')
    },
    selectHomeMenu () {
      this.$emit('selectHomeMenu')
    }
  }
}
</script>

<style lang="sass" scoped>
.menu-home.active
  color: #03a9f4
  &:hover
    color: #03a9f4
.toggle-sidebar
  padding: 10px
  cursor: pointer
  &:hover
    color: #fff
.toolbar-version
  display: none
  padding-left: 20px
  line-height: 36px
.screenfullBox
  margin-bottom: 5px
// .workflow-link
//   position: absolute
//   right: 240px
.align-items-end
  align-items: end
</style>
